/**
 * @description 表单新增
 * 
 */
import { useEffect, useState } from 'react';
import { Form, Button, Input } from 'antd';


import YyFormItem from '@/components/FormItem'


const formItemList = [
  {
    form_type: 'YyText',
    columnName: 'YyText',
    comments: '普通',
    placeholder: "请输入文本",
    rules: [
      {
        required: true,
        message: '请输入'
      }
    ]
  },
  {
    form_type: 'YyText',
    columnName: 'YyText_disable',
    comments: '禁用的普通',
    placeholder: "请输入文本",
    unique: '自',
  },
  {
    form_type: 'YyTextNumber',
    columnName: 'YyTextNumber',
    placeholder: "请输入数值",
    comments: '数值'
  },
  {
    form_type: 'YyTextNumber',
    columnName: 'YyTextNumber_disable',
    placeholder: "请输入数值",
    unique: '自',
    comments: '禁用的数值'
  },
  {
    form_type: 'YySingleSelect',
    columnName: 'YySingleSelect',
    comments: '单选',
    placeholder: "请选择",
    options: [
      {
        label: '选项一',
        value: '选项一',
      },
      {
        label: '选项二',
        value: '选项二',
      },
    ],
  },
  {
    form_type: 'YySingleSelect',
    columnName: 'YySingleSelect_disable',
    comments: '禁用的单选',
    placeholder: "请选择",
    unique: '自',
    options: [
      {
        label: '选项一',
        value: '选项一',
      },
      {
        label: '选项二',
        value: '选项二',
      },
    ],
  },
  {
    form_type: 'YyDatePicker',
    columnName: 'YyDatePicker',
    comments: '日期',
  },
  {
    form_type: 'YyDatePicker',
    columnName: 'YyDatePicker_disable',
    unique: '自',
    comments: '禁用的日期',
  },

  {
    form_type: 'YyFace',
    columnName: 'YyFace',
    comments: '人脸识别',
  },
  {
    form_type: 'YyFile',
    columnName: 'YyFile',
    comments: '文件上传',
  },
  {
    form_type: 'YyTextArea',
    columnName: 'YyTextArea',
    comments: '多行文本',
  },
  {
    form_type: 'YyQuill',
    columnName: 'YyQuill',
    comments: '富文本',
  },
]

function CenterTab({ base }) {

  // 表单实例form
  const [form] = Form.useForm()


  return (
    <Form
      className='centerform'
      form={form}
      layout={base.layout}
      name="center-form"
      autoComplete="off"
      colon={base.colonFlag}
      spellCheck={false}
    >

      {/* 表单，根据form_type确定不同的输入框 */}
      {
        formItemList.map(column => (
          <YyFormItem
            key={column.columnName}
            form={form}
            column={column}
            showLabel={base.labelFlag}>
          </YyFormItem>
        ))
      }

      {/* 余额/会员 */}
      <Form.Item
        label='余额'
        className='email-form-item'
      >
        <div className='email-wrapper'>
          <Form.Item
            name='money'
            noStyle
          >
            <Input className="email-input" placeholder='99' disabled allowClear />
          </Form.Item>
          <Button className='email-btn'>点我充值</Button>
        </div>

      </Form.Item>

      {/* 按钮区域 */}
      <div className='btn-wrapper'>

        <Button className="logout">退出登录</Button>
        <Button type="primary" className="submit" htmlType="submit">提交</Button>
      </div>
    </Form>

  )
}
export default CenterTab